<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width={device-width}, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>网页工程实训</td>
            <td>30.00</td>
        </tr>
        <tr class="tr2">
            <td>c语言工程实训</td>
            <td>32.00</td>
        </tr>
    </table>
    <button class="add">增加一行</button>
    <button class="del">删除第2行</button>
    <button class="change">修改标题</button>
</body>
<script>
    var addDom=document.querySelector(".add");
    var delDom=document.querySelector(".del");
    var changeDom=document.querySelector(".change");
    var tr2Dom=document.querySelector(".tr2");
    var thDom=document.querySelector("th");
    var tableDom=document.querySelector("table");
    addDom.onclick=function(){
        var trDom=document.createElement("tr");
        trDom.innerHTML=`
        <td>新增书名</td>
        <td>新增价格</td>
        `;
        tableDom.appendChild(trDom);
    }
    delDom.onclick=function(){
        tr2Dom.style.display="none";
    }
    changeDom.onclick=function(){
        thDom.textContent="新增标题";
    }

</script>
</html>